<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性的操作方法</title>
</head>
<style>
    *{
        padding:0;
        margin:0;
    }
    .box{
        width: 500px;
        height: 400px;
        border:1px solid #ccc;
        margin:100px auto;
        overflow:hidden;
    }
    ul{
        width: 600px;
        height: 40px;
        margin-left:-1px;
        list-style:none;
    }
    li{
        float:left;
        width: 101px;
        height: 40px;
        text-align:center;
        font:500 18px/40px "simsun";
        background-color:pink;
        cursor:pointer;
    }
    span{
        display:none;
        width: 500px;
        height: 360px;
        background-color:yellow;
        text-align:center;
        font:700 150px/360px "simsun";
    }
    .show{
        display:block;
    }
    .current{
        background-color:yellow;
    }
</style>
<body>
<div class="box">
    <ul>
        <li>鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="box">
    <ul>
        <li>鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="box">
    <ul>
        <li>鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="box">
    <ul>
        <li>鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="box">
    <ul>
        <li>鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
<script>
    //鼠标放在上面的li上，li本身变色（添加类），对应的span也显示出来（添加类）
    var boxArr=document.getElementsByClassName("box");
    //函数封装
    for(var i=0;i<boxArr.length;i++){
        fn(boxArr[i]);
    }
    function fn(ele){
        var li_links=ele.getElementsByTagName("li");
        var span_links=ele.getElementsByTagName("span");
        for(var i=0;i<li_links.length;i++){
            li_links[i].index=i;
            li_links[i].onmouseover=function(){
                //排他思想
                for(var j=0;j<span_links.length;j++){
                    span_links[j].className="";
//            span_links[j].removeAttribute("class");
                    li_links[j].className="";
//            li_links[j].removeAttribute("class");
                }
                this.className="current";
//        this.setAttribute("className","current");
                span_links[this.index].className="show";
//        span_links[this.getAttribute("index")].setAttribute("class","show");
                span_links[this.index].innerHTML=this.innerHTML;
            }
        }
    }

</script>
</html>